<template>
    <view class="parallel_container">
        <cu-custom bgColor="bg-blue" :isBack="true">
            <block slot="backText"></block>
            <block slot="content">
                <text class="nav-title nav-title-selected">平行进口车</text>
            </block>
        </cu-custom>
        <!-- <addressSearchFixed ref="setAddres" @searchBtn='event_clickSearchBtn' :isShowAddress="false"></addressSearchFixed>
        <view class="section"> -->

      
        <scroll-view @scroll="scrollY" :scroll-into-view="currentLetter" scroll-y>
            <view class="nav_title">
            <text>热门车系</text>
        </view>

        <view class="nav">
            <view class="nav_item" @click="HotBtn(item)" v-for="(item, index) in Hot" :key="index">
                <image  mode="aspectFill" lazy-load :lazy-load-margin="0" :src="item.cover_url" alt="" />
                <view class="textName">{{ item.name }}</view>
            </view>
        </view>
            <view class="list_container">
                <!-- 品牌索引列表 -->
                <view class="newCar-indexed-list__scroll" v-for="(carBrandInfo, i) in carBrandInfoList" :key="i"
                    :id="carBrandInfo.key">
                    <!-- 字母 -->
                    <view class="newCar-indexed-list__title-wrapper">
                        <view class="newCar-indexed-list__title zimus"  ref="zimu">{{ carBrandInfo.key }}</view>
                    </view>
                    <!-- 品牌列表 -->
                    <view v-for="(carBrand, j) in carBrandInfo.value" :key="j">
                        <view class="content-row bg-white" @click="event_clickCarBrand(carBrand, j, carBrandInfo.key)">
                            <view class="content-row1">
                                <view class="flex align-center justify-center"
                                    style="width: 138rpx;height: 102rpx; margin-left: -20rpx;">
                                    <image class="iamge-class" :src="carBrand.cover_url" mode="heightFix"></image>
                                </view>
                                <view class="marginLeft5 brand-name-class">{{ carBrand.name }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="bottom-padding">
 
            </view>
        </scroll-view>

        <!-- 右侧字母导航条 -->
        <!-- -->
        <view class="newCar-indexed-list__menu" :style="[{ marginTop: SeachBar + 'px' }]">
            <view ref="zhumen" class="zimuheight"
                :class="i == ACtiveIndex?'zimenheight': ''"
                v-for="(carBrandInfo, i) in carBrandInfoList" :key="i" @click="toSelectIndex(carBrandInfo.key, i)">

                {{ carBrandInfo.key }}
            </view>
        </view>
    </view>
</template>

<script>
import { getNewCarBrandList } from '@/api/brand.js';
import cuCustom from "@/components/custom-nav/cu-custom.vue";
import addressSearchFixed from "@/components/addressSearch/addressSearchFixed.vue";
import { getParallelImportVehicleHot, getParallelImportVehicleBrand } from "@/api/newEnergy.js"
export default {
    components: {
        cuCustom,
        addressSearchFixed
    },

    data() {
        return {
            temp: null,
            index: undefined,
            Hot: [],
            carBrandInfoList: [],
            nvueWidth: 730,
            currentLetter: '',
            flagScpoll: false,
            arrIndex: [],
            ACtiveIndex: 0,
            zimu:''



        }
    },
    onLoad() {
        this.getHot()
        this.getPinpai()
    },
    mounted() {


       

    },
    onReady() {
        setTimeout(() => {
            uni.createSelectorQuery().selectAll('.zimus').boundingClientRect((data) => {
                console.log(data, '12222222222');
                this.arrIndex = data.map(item => {
                    return item.top
                })
            }).exec()
        }, 1000)
    },
    methods: {
        scrollY(event) {
            const scrollTop = event.detail.scrollTop + 100;
            for(let i = 0 ; i < this.arrIndex.length ; i ++) {
                // 如果滚动距离大于等于当前项xiaoshi的top值，并且当前项的top值大于等于下一个项的top值，则说明当前项处于活动状态
                if(scrollTop >= this.arrIndex[i] && scrollTop < this.arrIndex[i + 1]) {                     
                    
                    console.log(i,' ii');
                    this.ACtiveIndex = i 
                   
                    // console.log(this.currentLetter);
                }                                   
            }
            // uni.createSelectorQuery().selectAll('.zimuheight').boundingClientRect((rect) => {
            //     console.log('rect', rect);
            //     // if (rect) {
            //     // for(let i = 0 ; i < rect.length ; i ++) {
            //     //     if(scrollTop >= rect[i].top) {
            //     //             newData[i].flag = true
            //     //             // console.log(newData[i], '110');
            //     //             this.flagScpoll = false
            //     //         }else {
            //     //             newData[i].flag = false
            //     //         }
            //     // }
            //     // }
            //     }).exec();
            //     that.carBrandInfoList = newData
            //     // console.log(that.carBrandInfoList);

        },
        // 进入车系
        HotBtn(item) {
            console.log(item.id, '点击热门车系');
            // uni.navigateTo({
            //     url: `/newEnergy/parallelImportCar/parallelImportCarDetail/parallelImportCarDetail?brand_id=` + item.id
            // })
			console.log(item);
			uni.navigateTo({
			  url:'/newEnergy/parallelImportCar/parallelImportCarList/parallelImportCarList?items=' + JSON.stringify(item)
			})
        },
        getHot() {
            getParallelImportVehicleHot().then(res => {
                this.Hot = res.data
            }).catch(err => {
                console.log(err, 'err');

            })
        },
        // 品牌点击
        event_clickCarBrand(items) {
            console.log(items);
            uni.navigateTo({
                url: `/newEnergy/parallelImportCar/parallelImportCarDetail/parallelImportCarDetail?brand_id=${items.id}&name=${items.name}`
            })
        },
        getPinpai() {
            getParallelImportVehicleBrand().then(res => {
                this.carBrandInfoList = res.data
                console.log(this.carBrandInfoList);
                this.$forceUpdate()
            }).catch(err => {
                console.log(err, 'err');

            })
        },
        // api_getNewCarBrandList() {
        //     getNewCarBrandList().then(res => {
        //         console.log(res);
        //         this.carBrandInfoList = res.data
        //         console.log(this.carBrandInfoList);
        //         this.$forceUpdate()
        //     })
        // },
        event_clickSearchBtn(e) {
            console.log(e);
        },

        // 点击右侧字母
        toSelectIndex(items, index) {
            this.ACtiveIndex = index
            this.currentLetter = items
        }

    },
    mounted() {
        // this.api_getNewCarBrandList()
    }
}
</script>

<style lang="less" scoped>
.parallel_container {
    width: 100%;
    height: 100%;

    .newBrand {
        color: red !important;
    }

    .section {

        // background-color: white;
        box-sizing: border-box;
        width: 100%;
        height: 100%;

    }

    
    .nav_title {

        background-color: #fff;
        padding: 10rpx 30rpx;
        box-sizing: border-box;

        text {
            font-family: PingFang SC;
            color: #05052A;
            font-size: 30rpx;
            font-weight: 800;
            position: relative;
        }

        text::before {
            content: '';
            width: 50rpx;
            height: 10rpx;
            background: rgb(96, 154, 255);
            border-radius: 50%;
            position: absolute;
            bottom: 0rpx;
            right: 20rpx;
            -webkit-filter: blur(5rpx);
            filter: blur(5rpx);
        }

    }


    .nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        padding: 10rpx 20rpx;
        background-color: #fff;

        .nav_item {
            width: 21%;
            margin: 30rpx 0;
            height: 100rpx;
            text-align: center;

            image {
                width: 100%;

                height: 100%;
            }

            .textName {
                font-size: 22rpx;

            }
        }
    }

    .list_container {
        // height: 950rpx;
        // overflow: auto;
        padding-bottom: 50rpx;
    }

    /* 车品牌索引列表 */
    .newCar-indexed-list__title-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 6px 0px 4px 14px;

        .newCar-indexed-list__title {
            font-size: 28rpx;
            font-family: DIN Alternate;
            font-weight: bold;
            color: #1C2125;
            opacity: 1;
        }
    }

    .content-row {
        padding: 0rpx 20rpx;
        box-sizing: border-box;

        .content-row1 {
            display: flex;
            flex-direction: row;
            align-items: center;
            border-bottom: 1rpx solid #E6E6E6;
			
        }
    }

    .newCar-indexed-list__menu {
        display: flex;
        position: fixed;

        top: 50%;
        right: 0;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(0, -50%);

        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .right-view-text {
        font-size: 20rpx;
        font-family: DIN Alternate;
        font-weight: bold;
        color: #999999;
        padding: 4rpx;
    }

    .right-view-text-select {
        font-size: 18rpx;
        font-family: DIN Alternate;
        margin: 4rpx 0;
        color: #999999;
        padding: 4rpx;
    }

    .zimuheight {

        // background: #0E59EA;
        border-radius: 50%;
        margin-top: 20rpx;
        width: 30rpx;
        text-align: center;
        color: #999999;

    }

    .zimenheight {
        background: #0E59EA;
        border-radius: 50%;
        // margin-top:20rpx;
        width: 30rpx;
        text-align: center;
        color: #fff;
    }

    .iamge-class {
        width: 100rpx;
        height: 52rpx;
    }



    .brand-name-class {
        font-size: 28rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #000026;
        opacity: 1;
    }
}
</style>